<template>
  <el-dialog
    title="添加用户"
    :visible.sync="myorganizationUserAddTableDialog"
    width="70%"
    @open="organizationUserAddTableDialogOpen"
  >
    <div style="text-align:right;line-height:30px">
      <el-row :gutter="20">
        <el-col :span="16" style="text-align: left">
          <div style="width:200px;display:inline">
            <span style="font-weight: bold">请选择需要添加的用户</span>
              <el-select v-model="statusType" slot="prepend" placeholder="请选择" size="mini" @change="tableSearch">
                <el-option label="全部" value="3" ></el-option>
                <el-option label="已启用" value="1"></el-option>
                <el-option label="已禁用" value="2"></el-option>
                <el-option label="已删除" value="0"></el-option>
              </el-select>
          </div>

        </el-col>

        <el-col :span="8">
          <div>
            <el-input placeholder="请输入内容" v-model="searchValue" class="input-with-select"  size="mini">
              <el-select v-model="type" slot="prepend" placeholder="请选择">
                <el-option label="全部" value="0" ></el-option>
                <el-option label="用户名" value="1"></el-option>
                <el-option label="真实姓名" value="2"></el-option>
                <el-option label="角色名称" value="3"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search" @click="tableSearch"></el-button>
            </el-input>
          </div>
        </el-col>

      </el-row>
    </div>
      <yfu-table :param="param" v-on:getCheckedRows="getRows" ref="demoTable1"></yfu-table>
      <span slot="footer" class="dialog-footer">
          <el-button @click="myorganizationUserAddTableDialog = false" size="mini">取 消</el-button>
          <el-button type="primary" size="mini" @click="addUserToOrganation">确 定</el-button>
      </span>
  </el-dialog>
</template>
<style>
</style>
<script>
  import { getUserListNotOrganizationRemote } from '@/view/api/userManager.js'
  import { AddUserOrganizationRemote } from '@/view/api/organization.js'
  import {yfuPost} from '@/utils/request.js'
  import {yfuErrorToast, yfuSuccessToast} from '@/utils/yfuMessage.js'
  export default {
    methods: {
      addUserToOrganation () {
        let cThis = this
        let rows = this.$refs.demoTable1.getCheckedRows()
        if (rows == null || rows === '' || rows.length === 0) {
          yfuErrorToast('必须选中一行')
          return
        }
        let userIds = ''
        for (let row of rows) {
          userIds += row.id + ','
        }
        userIds = userIds.substring(0, userIds.length - 1)
        let oId = this.$store.getters.currentOrganizationId
        let param = {}
        param.userIds = userIds
        param.groupids = oId
        yfuPost(process.env.BASE_API, AddUserOrganizationRemote.url, param, function () {
          cThis.myorganizationUserAddTableDialog = false
          yfuSuccessToast('添加成功')
          cThis.$emit('on-refresh-change')
        })
      },
      organizationUserAddTableDialogOpen () {
      },
      openOrganizationUserAddTableDialog () {
        this.myorganizationUserAddTableDialog = true
        this.refresh()
      },
      closeOrganizationUserAddTableDialog () {
        this.myorganizationUserAddTableDialog = false
      },
      // 得到所有选中行
      getRows (row) {
        console.log(row)
      },
      // 刷新TABLE界面
      refresh () {
        let params = {}
        if (this.type === '0') {
          params.all = this.searchValue
        }
        if (this.type === '1') {
          params.userName = this.searchValue
        }
        if (this.type === '2') {
          params.trueName = this.searchValue
        }
        if (this.type === '3') {
          params.roles = this.searchValue
        }

        if (this.statusType === '0') {
          params.status = 0
        } else if (this.statusType === '1') {
          params.status = 1
        } else if (this.statusType === '2') {
          params.status = 2
        } else if (this.statusType === '3') {
        }
        this.$refs.demoTable1.refreshTable(params)
      },
      tableSearch () {
        this.refresh()
      }
    },
    data () {
      return {
        myorganizationUserAddTableDialog: this.organizationUserAddTableDialog,
        searchValue: '',
        type: '0',
        statusSearch: '',
        statusType: '3',
        param: {
          showBox: true,
          baseURL: process.env.BASE_API,
          url: getUserListNotOrganizationRemote.url,
          urlParam: {
            notOrganizationId: this.$store.getters.currentOrganizationId
          },
          showSearch: false,
          showOperateRow: false,
          rows: [
            {
              prop: 'userName',
              label: '姓名',
              width: '100px'
            },
            {
              prop: 'trueName',
              label: '真实姓名',
              width: '100px'
            },
            {
              prop: 'status',
              label: '状态',
              width: '100px',
              formatter: function (row, column) {
                if (row.status === 0) {
                  return '已删除'
                } else if (row.status === 1) {
                  return '已启用'
                } else if (row.status === 2) {
                  return '已禁用'
                }
              }
            },
            {
              prop: 'roles',
              label: '所属角色',
              width: '200px'
            }, {
              prop: 'createTime',
              label: '创建时间'
            }
          ]
        }
      }
    }
  }
</script>
